<template>
	<div class="analyse-page">
		<!-- 指标/时间/维度切换 -->
		<div class="selectors">
			<el-radio-group v-model="activeMetric" size="small">
				<el-radio-button label="电" />
				<el-radio-button label="水" />
				<el-radio-button label="气" />
			</el-radio-group>

			<el-radio-group v-model="timeRange" size="small" style="margin-left: 20px">
				<el-radio-button label="周">最近7天</el-radio-button>
				<el-radio-button label="月">最近30天</el-radio-button>
			</el-radio-group>
		</div>

		<trend-compare :data="trendData" />
		<score-card :score="efficiencyScore" />

		<el-row :gutter="20" style="margin-top: 20px;">
			<el-col :span="12">
				<region-ranking :data="regionRanking" />
			</el-col>
			<el-col :span="12">
				<heatmap-view :data="heatmapData" />
			</el-col>
		</el-row>

		<advice-panel :suggestions="suggestions" style="margin-top: 30px;" />
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import TrendCompare from '@/components/charts/TrendCompare.vue'
import RegionRanking from '@/components/charts/RegionRanking.vue'
import HeatmapView from '@/components/charts/HeatmapView.vue'
import ScoreCard from '@/components/panels/ScoreCard.vue'
import AdvicePanel from '@/components/panels/AdvicePanel.vue'

const activeMetric = ref('电')
const timeRange = ref('周')

const trendData = ref({})
const regionRanking = ref({})
const heatmapData = ref({})
const efficiencyScore = ref(87)
const suggestions = ref([])

function updateData() {
	trendData.value = {
		title: `能耗趋势 - ${activeMetric.value}`,
		labels: timeRange.value === '周' ? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] : ['1', '5', '10', '15', '20', '25', '30'],
		current: [100, 120, 140, 130, 110, 115, 125],
		previous: [90, 110, 135, 120, 105, 108, 100]
	}
	regionRanking.value = {
		labels: ['A区', 'B区', 'C区'],
		values: [120, 95, 90]
	}
	heatmapData.value = {
		labels: ['0时', '6时', '12时', '18时'],
		days: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		matrix: [
			[0, 1, 2, 1], [1, 2, 3, 2], [2, 3, 4, 2], [3, 2, 1, 0],
			[1, 1, 2, 3], [2, 2, 2, 2], [1, 0, 1, 3]
		]
	}
	suggestions.value = [
		'建议对高峰时段进行用电负载削峰处理',
		'可在低用能时段对设备进行集中运行',
		'考虑采用LED照明替代旧设备以降低照明能耗'
	]
}

onMounted(updateData)
watch([activeMetric, timeRange], updateData)
</script>

<style scoped>
.selectors {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
</style>
